<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>案例-头像上传</title>
    <link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css">
    <style>
        .thumb-box {
            text-align: center;
            margin-top: 50px;
        }

        .thumb {
            width: 150px;
            height: 150px;
            object-fit: cover;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="thumb-box">
        <!-- 头像 -->
        <img src="./images/cover.jpg" class="img-thumbnail thumb" alt="" />
        <div class="mt-2">
            <!-- 文件选择框 -->
            <!-- accept 属性表示可选择的文件类型 -->
            <!-- image/* 表示只允许选择图片类型的文件 -->
            <input type="file" id="iptFile" accept="image/*" style="display: none;" />
            <!-- 选择头像图片的按钮 -->
            <button class="btn btn-primary" id="btnChoose">选择 & 上传图片</button>
        </div>
    </div>
    <script src="./axios.js"></script>
    <script>
        const img = document.querySelector('.thumb');
        const input = document.querySelector('#iptFile');
        const btn = document.querySelector('#btnChoose');
        btn.addEventListener('click', function () {
            input.click()
        });
        input.addEventListener('change', function () {
            // console.log(this.files[0]);
            if (!this.files[0]) alert('请选择头像')
            const fd = new FormData()
            fd.append('avatar', this.files[0])
            axios.post('http://ajax-api.itheima.net/api/file', fd).then(({ data: res }) => {
                // console.log(res);
                img.src = res.data.url
            })
        })
    </script>
</body>

</html>